<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
  <title>出错了!</title>
  <style type="text/css">
    html,
    body {
      font: 18px Arial, "Pingfang SC", "Microsoft Yahei", "Segoe UI", sans-serif;
      font-size: 62.5%;
      overflow: hidden;
      margin: 0;
      background: #fff;
      -webkit-user-select: none;
    }

    .container {
      position: absolute;
      top: -1.5rem;
      right: 0;
      bottom: 0;
      left: 0;
      width: 20rem;
      height: 15rem;
      margin: auto;
    }

    .container:before {
      display: block;
      width: 100%;
      height: 10rem;
      content: '';
      background: url('') no-repeat;
      background-position: center;
      background-size: 10rem;
    }

    .container h3 {
      font-size: 1.12rem;
      font-weight: normal;
      line-height: 1.5;
      margin: 0;
      text-align: center;
      color: rgb(102, 102, 102);
    }

    .action {
      padding: 27px 0;
    }

    .button {
      font-size: 1.8rem;
      line-height: 5rem;
      display: inline-block;
      width: 15rem;
      height: 5rem;
      text-align: center;
      text-decoration: none;
      color: white;
      border-radius: 1rem;
      background: #2b91e3;
    }

    .button:hover {
      background: #2782cc;
    }

    .bottom {
      font-size: .9rem;
      line-height: 1rem;
      padding-top: 1rem;
      text-align: center;
      text-decoration: none;
      color: rgb(178, 178, 178);
    }

    @media screen and (min-width:321px) and (max-width:767px) {
      html,
      body {
        font-size: 16px;
      }
    }

    @media screen and (min-width:768px) {
      html,
      body {
        font-size: 24px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h3>哎呀，该网页无法访问,</h3>
    <h3>可能网络已经断开</h3>
    <div class="bottom">点击空白处刷新</div>
    <!--    <div class="action"><a href="javascript:;" onclick="window.location.reload();return false;" class="button">重新加载</a></div>-->

  </div>

  <script type="text/javascript">
    var cache = {}
    window.OOFVOIDACTIONSHEET = true;

    function setFontSize() {
      if (window.orientation == 180 || window.orientation == 0) {
        //cache.screenType = 1;
        document.querySelector('.container').style.top = '-7.5rem'
        cache.height = window.screen.height;
        cache.width = window.screen.width;
      }
      if (window.orientation == 90 || window.orientation == -90) {
        //cache.screenType = 0;
        document.querySelector('.container').style.top = '-1.5rem'
        cache.height = window.screen.width;
        cache.width = window.screen.height;
      }
      if (cache.height === 320) {
        document.querySelector('html').style.fontSize = '12px'
      } else {
        document.querySelector('html').style.fontSize = '16px'
      }


    }
    setFontSize();
    document.addEventListener("touchstart", function(e) {
      if (e.target.tagName !== "H3" && e.target.tagName !== "DIV") {
        setTimeout(function() {
          location.reload();
        }, 300)
      }
    })
    addEventListener('orientationchange', function() {
      setFontSize()
    }, 200);
  </script>
</body>

</html>
